<template>
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="emptyFn">重置</el-button>
                <el-button @click="search" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <el-form @submit.prevent="search" ref="searchFormRef">
                <el-form-item label="账号/姓名:" prop="keyword" label-width="120px">
                    <el-input v-model="keyword" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="add-box">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>
            <span>资源列表</span>
        </div>
        <el-button type="primary" @click="addFn">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="60" header-align="center" align="center" />
        <el-table-column prop="name" label="资源名称" header-align="center" align="center" />
        <el-table-column prop="url" label="资源路径" header-align="center" align="center" />
        <el-table-column prop="description" label="描述" header-align="center" align="center" />
        <el-table-column prop="createTime" label="添加时间" header-align="center" align="center">
            <template #default="scope">
                <span>{{ fomatDate(scope.row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120" header-align="center" align="center">
            <template #default="scope">
                <el-button type='primary' link @click="editFn(scope.row.id)">编辑</el-button>
                <el-button type='primary' link @click="deleteFn(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="box">
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="pageNum" v-model:page-size="pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
                @current-change="pageNumChange" :page-sizes="[10, 20, 50, 100]" />
        </ElConfigProvider>
    </div>
    <!-- 弹出框(编辑) -->
    <el-dialog v-model="dialogVisible" :title="titile" width="30%" :before-close="hideDialog">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="资源名称" prop="name" required>
                <el-input v-model="ruleForm.name" type="text" autocomplete="off" :minlength="300" />
            </el-form-item>
            <el-form-item label="资源路径" prop="url" required>
                <el-input v-model="ruleForm.url" type="text" autocomplete="off">
                    <template #prepend>/</template>
                    <template #append>/**</template>
                </el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input type="textarea" resize="none" v-model.number="ruleForm.description" />
            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">取消</el-button>
                <el-button @click="resetForm(ruleFormRef)">确定</el-button>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="hideDialog">取消</el-button>
                <el-button type="primary" @click="handleClose">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

</template>
<script setup lang='ts'>
import { fomatDate } from "@/utils"
import { useTable } from "@/hooks/useTable"
import { user } from "@/api";
import { Search, Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, FormInstance, FormRules } from "element-plus";
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id: 0,
    name: "",
    url: "",
    description: "",
})
const titile = ref("")
const reg_tel_english = "^[A-Za-z]+$"

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    url: [
        { required: true, pattern: reg_tel_english, message: '只能输入英文', trigger: 'blur' },
    ]
})
// 开启
const addFn = () => {
    titile.value = "添加资源"
    dialogVisible.value = true
    console.log(dialogVisible.value);
}
// 关闭
const hideDialog = () => {
    dialogVisible.value = false
    console.log(ruleForm.url);
    wipeData()
    console.log(dialogVisible.value);
}
// 编辑
const editFn = (id: number) => {
    titile.value = "编辑资源"
    console.log(id);
    dialogVisible.value = true
    ruleForm.id = id
    user.detailsAPI(id).then(res => {
        console.log(res);
        ruleForm.description = res.data.description
        ruleForm.name = res.data.name
        ruleForm.url = res.data.url
    })
}
// 删除
const deleteFn = (id: number) => {
    ElMessageBox.confirm('确定删除吗？')
        .then(() => {
            user.backstageDeleteAPI(id).then(res => {
                console.log(res);
                fetchData()
            })
        })
        .catch(() => {
            return
        })

}

const resCreate = () => {
    user.resCreateAPI(ruleForm).then(res => {
        console.log(res);
    })
}

const wipeData = () => {
    ruleForm.description = ""
    ruleForm.name = ""
    ruleForm.url = ""
}

// 二次确认
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定添加资源吗？', '确定添加', {
        type: 'warning',
    }).then(() => {
        console.log("进入了");
        if (ruleForm.id !== 0) {
            console.log(1);

            dialogVisible.value = false
            ruleForm.url = "/" + ruleForm.url + "/**"
            user.resCreateUpdateAPI(ruleForm).then(res => {

                // ruleForm.description = res.data.description
                // ruleForm.name = res.data.name
                // ruleForm.url = res.data.url

                console.log(res);
            })
            fetchData()
            wipeData()
        } else {
            console.log(2);

            dialogVisible.value = false
            ruleForm.url = "/" + ruleForm.url + "/**"
            // 发送请求
            resCreate()
            // 重新请求数据
            fetchData()
            // 清空数据
            wipeData()
        }

    })
        .catch(() => {
            // catch error
            return
        })
}

const { tableData, pageNum, pageSize, total, pageSizeChange, pageNumChange, search, keyword, emptyFn, fetchData } = useTable(user.resourceLIstAPI)
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
}

.box {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px 0;
    border-radius: 10px;
    // box-shadow: 0 0 4px 2px #ccc;
    border: 1px solid #ccc;

    .el-icon {
        top: 2px;
    }
}
</style>